<template>
    <div class="FileFolder-container">
        <div class="article-intro">
            醉后不知天在水, 满船清梦压星河
        </div>
        <div class="folder-container">
            <div class="file-box" v-for="(item,index) in folders" :key="index">
                <div class="img-box" @click="to(item)">
                    <img  :src="src1"/>
                </div>
                <p>{{item.Name}}</p>
            </div>
        </div>
    </div>
</template>

<script>
import { fetchFolders } from '../Api'
export default {
    data() {
        return {
            src1:"",
            src2:"",
            src3:"",
            src4:"",
            folders: [],
        }
    },
    created() {
        this.src1 = require("@/assets/folder1.png")
        this.src2 = require("@/assets/folder2.png")
        this.src3 = require("@/assets/folder3.png")
        this.src4 = require("@/assets/folder4.png")
        var params = {}
        params.path = "article";
        // 获取folders
        fetchFolders(params).then(res=> {
            this.folders = JSON.parse(res.data.folders)
        }).catch(err=>{
            console.log(err)
        })
    },
    methods: {
        to(item) {
            this.$router.push(`/note/${item.Name}`)
        }
    }
}
</script>

<style lang="less" scoped>
    // .FileFolder-container {
    // }
    .article-intro {
        text-align: center;
        font-size: 30px;
        font-family: 'xingkai';
    }
    .folder-container {
        // margin-top: 100px;
        display: flex;
        flex-wrap: wrap;
        padding-left: 150px;
        .file-box {
            text-align: center;
            margin-right: 80px;
            margin-top: 50px;
            p {
                margin-right: 8px;
                width :100px;
                font-size: 14px;
                line-height: 14px;
                height: 14px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .img-box {
                width: 100px;
                img {
                    width: 100%;
                }
            }
            .img-box:hover {
                cursor: pointer;
            }
        }
    }
</style>